<template>
<div>
    <div class="title">
        <p class="renyuan">组织树</p>
    </div>
    <Modal v-model="modal1" title="新增组织"  :loading="loading" @on-ok="asyncOK" width="570" :styles="{top:'180px'}">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
            <Form-item class="sost1" prop="orgName">
                <p class="tit">组织名称：</p>
                <Input v-model="formValidate.orgName"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="managerName">
                <p class="tit">组织负责人：</p>
                <Input v-model="formValidate.managerName"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="orgType">
                <p class="tit">组织分类：</p>
                <Input v-model="formValidate.orgType"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost1" prop="remark" style="width: 520px;margin-bottom: 10px;">
                <p class="tit">备注</p>
                <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 3,maxRows: 10}" placeholder="未编辑"></Input>
            </Form-item>
        </Form>
        <div slot="footer" style="text-align: center;margin:5px 0px 0px 0px;">
            <Button id="serch1"  @click="handleSubmit_zz('formValidate')" type="primary">保存</Button>
        </div>
    </Modal>
    <div class="title1">
        <div class="tree">
            <Tree :data="baseData" expand @on-select-change="selectChange"></Tree>
        </div>
        <div>
            <div class="sosuo3_5">
                <div class="sost3_5">
                    <p class="tit1">组织编码：</p>
                    <Input v-model="model8.serch1" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"><Button slot="append" icon="ios-search" @click="change"></Button></Input>
                </div>
                <div class="sost3_5">
                    <p class="tit1">组织名称：</p>
                    <Input v-model="model8.serch2" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"><Button slot="append" icon="ios-search" @click="change"></Button></Input>
                </div>
                <div class="sost3_5">
                    <p class="tit1">节点状态：</p>
                    <Input v-model="model8.serch3" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
                </div>
                <div class="sost3_5">
                    <p class="tit1">组织分类：</p>
                    <Input v-model="model8.serch4" size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
                </div>
                <Button  @click="handleReset_2" class="congz_5" type="primary" style="font-size: 14px;">重置</Button>
            </div>
            <div class="tabtree">
                <Button class="xinz" @click="newadd('formValidate')" type="primary" style="font-size: 18px;">新增</Button>
                <Table stripe :columns="columns7" :data="data6"></Table>
            </div>
            <div class="page">
                <div class="pagtree">
                    <Page :total="500" ></Page>
                </div>
            </div>
        </div>
    </div>
</div>   
</template>
<script>
//<div class="title1">
//         <div class="tree">
//             <Tree :data="baseData" expand @on-select-change="selectChange"></Tree>
//         </div>
//         <div class="creattree">
//             <Form ref="treeformValidate" :model="treeformValidate" :rules="ruleValidate"  class="formt">
//             <span v-if="currentNodeTitle==null" class="tit">
//                 你将添加新组织：
//                 </span>
//             <span v-else class="tit">
//                 你将添加 <span style="color:#5b8cff;">{{currentNodeTitle}}</span> 的子组织：
//             </span>
//             <Form-item prop="title" style="padding-top:10px">
//                 <Input v-model="treeformValidate.title" placeholder="请输入组织结构名称"></Input>
//             </Form-item>
        
//             <Button type="text" @click="addRootNode" style="font-size: 14px;color:#5b8cff;margin-left: -12px;">添加总组织</Button>
//             <Button type="text" @click="remove()" style="font-size: 14px;color:#f7805f">删除</Button>
//             </Form>
//             <div class="formsub">
//                 <Button id="serchtree" type="primary" @click="handleSubmit('treeformValidate')">提交</Button>
//                 <Button id="canceltree" type="ghost" @click="handleReset('treeformValidate')" style="margin-left: 8px">重置</Button>
//             </div>
//         </div>
//     </div>
//     <div class="title">
//         <p class="renyuan">组织机构管理</p>
//         <Button class="xinz" type="text" @click="modal1 = true">新增</Button>
//         <Modal v-model="modal1" title="新增人员"  :loading="loading" @on-ok="asyncOK" width="570">
//             <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
//                 <Form-item class="sost1" prop="name">
//                     <p class="tit">组织名称：</p>
//                     <Input v-model="formValidate.name"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
//                 </Form-item>
//                 <Form-item class="sost1" prop="zuzi">
//                     <p class="tit">组织负责人：</p>
//                     <Input v-model="formValidate.zuzi"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
//                 </Form-item>
//                 <Form-item class="sost1" prop="who">
//                     <p class="tit">负责人：</p>
//                     <Select v-model="formValidate.who" clearable class="selc" style="width:240px;font-size: 14px" placeholder="未选择">
//                         <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
//                     </Select>
//                 </Form-item>
//                 <Form-item class="sost1" prop="email">
//                     <p class="tit">组织分类：</p>
//                     <Input v-model="formValidate.email"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
//                 </Form-item>
//                 <Form-item class="sost1" prop="desc" style="width: 520px;margin-bottom: 10px;">
//                     <p class="tit">备注</p>
//                     <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 3,maxRows: 10}" placeholder="未编辑"></Input>
//                 </Form-item>
//             </Form>
//             <div slot="footer" style="text-align: center;margin: 17px 0px;">
//                 <Button id="serch1"  @click="handleSubmit('formValidate')" type="primary">保存</Button>
//             </div>
//         </Modal>
//     </div>
//     <div class="sosuo1">
//          <div class="sost3">
//             <p class="tit1">组织编码：</p>
//             <Select v-model="model8" clearable class="selc" style="width:240px;font-size: 14px" placeholder="未选择">
//                 <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
//             </Select>
//         </div>
//         <div class="sost3">
//             <p class="tit1">组织名称：</p>
//             <Input  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
//         </div>
//         <div class="sost3">
//             <p class="tit1">组织分类：</p>
//             <Input  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
//         </div>
//         <div class="sost3">
//             <p class="tit1">节点状态：</p>
//             <Input  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
//         </div>
//         <Button id="serch2" @click="change" type="primary">查询</Button>
//         <Button id="cancel" @click="changec" type="primary">重置</Button>
//     </div>
//     <div class="tab">
//         <Table stripe border :columns="columns7" :data="data6"></Table>
//     </div>
//     <div class="kuoz">
//       <Button type="text" style="font-size: 14px;color:#5b8cff">修改</Button>
//       <Button type="text" style="font-size: 14px;color:#5b8cff">注销</Button>
//       <Button type="text" style="font-size: 14px;color:#5b8cff">激活</Button>
//       <Button type="text" style="font-size: 14px;color:#f7805f">删除</Button>
//       <Button type="text" style="font-size: 14px;color:#ffc15f">扩展信息设置</Button>
//   </div>
//     <div class="pag">
//         <Page :total="500" ></Page>
//     </div>
    
    import Base from '../common/Base.js'
    export default {
        mixins:[Base],
        data () {
            return {
                treeformValidate: {
                    _id: null,
                    type: 1,
                    title: '',
                    expand: true,
                    parentId: null,
                    currentParentId: null
                },
                currentNodeTitle: null,
                baseData: [],
                click:false,
                loading: true,
                people: '1',
                module:'users',
                model8:{
                    serch1:"",
                    serch2:"",
                    serch3:"",
                    serch4:""
                },
                formValidate: {
                    orgId:'',
                    orgName: '',
                    orgType:'',
                    tenantId: '2',
                    parentId: '1',
                    managerId: '3',
                    managerName: '',
                    createUser: 'hc',
                    remark:'',
                    orgCode:'2004'
                },
                ruleValidate: {
                    orgName: [
                        { required: true, message: '组织名称不能为空', trigger: 'blur' }
                    ],
                    managerName: [
                        { required: true, message: '组织负责人不能为空', trigger: 'blur' }
                    ],
                    orgType: [
                        { required: true, message: '组织分类不能为空', trigger: 'blur' }
                    ],
                    remark: [
                        { required: true, message: '请输入备注', trigger: 'blur' },
                        { type: 'string', min: 20, message: '备注不能少于20字', trigger: 'blur' }
                    ]
                },
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州市'
                    },
                    {
                        value: 'nanjing',
                        label: '南京市'
                    },
                    {
                        value: 'chongqing',
                        label: '重庆市'
                    }
                ],
                columns7: [
                    {
                        type: 'selection',
                        key: 'action',
                        width: 50,
                        align: 'center'
                    },
                    {
                        title: '组织编码',
                        width: 80,
                        key: 'bm'
                    },
                    {
                        title: '组织名称',
                        width: 140,
                        key: 'mc'
                    },
                    {
                        title: '状态',
                        width: 50,
                        key: 'zt'
                    },
                    {
                        title: '组织分类',
                        width: 100,
                        key: 'fl'
                    },
                    {
                        title: '备注',
                        width: 180,
                        key: 'bz',
                    },
                    {
                        title: '操作',
                        width: 187,
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/xiugai.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/zhuxiao.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/jihuo.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shanchu.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '')
                            ]);
                        }
                    }
                ],
                data6: [
                    {   
                        bm: '001',
                        mc:'杭州滨江分公司',
                        zt:'正常',
                        fl: '外部机构',
                        bz:'--'
                    },
                    {   
                        bm: '002',
                        mc:'杭州滨江分公司',
                        zt:'正常',
                        fl: '外部机构',
                        bz:'--'
                    },
                    {  
                        bm: '003',
                        mc:'杭州滨江分公司',
                        zt:'正常',
                        fl: '外部机构',
                        bz:'--'
                    },
                    {   
                        bm: '004',
                        mc:'杭州滨江分公司',
                        zt:'正常',
                        fl: '外部机构',
                        bz:'--'
                    },
                    {   
                        bm: '005',
                        mc:'杭州滨江分公司',
                        zt:'正常',
                        fl: '外部机构',
                        bz:'--'
                    }
                    
                ]
            }
        },
        methods: {
            newadd(name){
                this.modal1 = true;
                this.$refs[name].resetFields();
                Object.assign(this.$data.formValidate, this.$options.data().formValidate);
            },
            asyncOK () {
                setTimeout(() => {
                    this.modal1 = false;
                }, 1000);
            },
            handleReset_2() {
                this. model8={
                    serch1:"",
                    serch2:"",
                    serch3:"",
                    serch4:""
                };
            },
            change(){

            },
            getTreeData(type) {
                var _this = this;
                _this.$http.get(`http://localhost:3000/cate/${type}`).then(res => {
                _this.baseData = res.data;
                console.log(_this.baseData)
                })
            },
            selectChange(node) {
                this._id = node[0]._id; // _id就等于获取到的节点的_id
                this.treeformValidate.parentId = node[0]._id; // 表单提交里的parentId等于节点_id
                this.treeformValidate.currentParentId = node[0].parentId; // 当前的parentId就是它的节点的父ID
                this.currentNodeTitle = node[0].title; // 获取标题
            },
            editNode() {
                this.treeformValidate._id = this._id; // 当前的_id就是_id
                this.treeformValidate.parentId = this.treeformValidate.currentParentId; 
            },
            addRootNode() {
                this.treeformValidate._id = null; // _id是为null
                this.treeformValidate.parentId = null; // 父id，parentId是为null
            },
            addChildNode(node) {
                if (this.treeformValidate.parentId === null) {
                alert('no')
                } else {
                alert(this.treeformValidate.parentId)
                }
            },
            handleSubmit_zz(name) {
             var _this = this;
             var submitUrl, submitMethods;
            if (_this.formValidate.orgId != '') {
                 submitUrl = `${_this.dmoreurl}/saOrg/saOrgUpdate`;
                 submitMethods = 'POST';
                 console.log('updata')
             } else {
                 submitUrl = `${_this.dmoreurl}/saOrg/saOrgAdd`;
                 submitMethods = 'POST'
                 console.log('new')
                 console.log(_this.formValidate)
             }
            //  _this.$refs[name].validate((valid) => {
            //     if (valid) {
            //         _this.$http({
            //                 url: submitUrl,
            //                 method: submitMethods,
            //                 data:_this.formValidate
            //             })
            //             .then(function(response) {
            //                 if(response.data){
            //                     console.log(response)
            //                 _this.$Message.success('提交成功!');
            //                 _this.modal1 = false;
            //                 //_this.getData_ry();
            //                 Object.assign(_this.$data.formValidate, _this.$options.data().formValidate);
            //                 }else{
            //                     _this.$Message.success('用户名重复！    请修改！');
            //                 }  
            //             }).catch((error) => {
            //                 if (error) {
            //                     this.$Message.info(error.response.msg)
            //                 }
            //             });
            //     } else {
            //         this.$Message.error('表单验证失败!');
            //     }
            //     })
            },
            handleSubmit(name) {
                var _this = this;
                var submitUrl, submitMethods;
                if(_this.treeformValidate.title == ''){
                    this.$Message.error('请填写相关组织!');
                }else{
                    if (_this.treeformValidate._id != null) {
                        submitUrl = `http://localhost:3000/cate/data/` + _this.treeformValidate._id;
                        submitMethods = 'PUT';
                    } else {
                        submitUrl = `http://localhost:3000/cate/data`;
                        submitMethods = 'POST'
                    }
                    _this.$refs[name].validate((valid) => {
                        if (valid) {
                            _this.$http({
                                url: submitUrl,
                                method: submitMethods,
                                data: _this.treeformValidate
                            })
                            .then(function(response) {
                                _this.$Message.success('提交成功!');
                                _this.getTreeData(_this.treeformValidate.type);
                                var type = _this.treeformValidate.type;  // 首先先获取type的值
                                //Object.assign(_this.$data.treeformValidate, _this.$options.data().treeformValidate); // 让我们的数据恢复到初始化状态
                                _this.treeformValidate.title = '';
                            })
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }
            },
            handleReset(name) {
                document.getElementById('canceltree').style.background='#8a92a6';
                document.getElementById('canceltree').style.boxShadow='none';
                setTimeout(function(){
                    document.getElementById('canceltree').style.background='#aab0c0';
                    document.getElementById('canceltree').style.boxShadow='0px 3px 1px rgba(170,176,191, 0.3)';
                },150)
                this.$refs[name].resetFields();
            },
            remove() {
                var _this = this
                _this.$http.delete(`http://localhost:3000/cate/${_this._id}`).then(res => {
                    _this.getTreeData(_this.treeformValidate.type);
                    Object.assign(_this.$data, _this.$options.data());
                    })
                }
            },
        created() {
            this.getTreeData(1);
        }
    }
</script>
<style lang="scss" >

</style>